<template>
	<view class="qiun-columns bg_12161F">
		<!-- #ifdef MP-WEIXIN -->
		<ad unit-id="adunit-908b0a16e90e2a5f" ad-type="grid" grid-count="8" ad-theme="white"></ad>
		<!-- #endif -->
	
		<view class="qiun-charts"  :style="{'width':width+'px','height':height+'px'}">
			<!--#ifdef MP-ALIPAY -->
			<canvas canvas-id="canvasCandle" id="canvasCandle" class="charts" :width="cWidth*pixelRatio" :height="cHeight*pixelRatio"
			 disable-scroll=true @touchstart="touchCandle" @touchmove="moveCandle"
			 @touchend="touchEndCandle"></canvas>
			<!--#endif-->
			<!--#ifndef MP-ALIPAY -->
			<canvas canvas-id="canvasCandle" id="canvasCandle" class="charts" disable-scroll=true @touchstart="touchCandle"
			 @touchmove="moveCandle" @touchend="touchEndCandle"></canvas>
			<!--#endif-->
		</view>
		<view class="qiun-charts2"  :style="{'width':width+'px','height':height2+'px'}">
			<!--#ifdef MP-ALIPAY -->
			<canvas canvas-id="canvasColumn" id="canvasColumn" class="charts2" :width="cWidth*pixelRatio" :height="cHeight*pixelRatio"
			></canvas>
			<!--#endif-->
			<!--#ifndef MP-ALIPAY -->
			<canvas canvas-id="canvasColumn" id="canvasColumn" class="charts2"></canvas>
			<!--#endif-->
		</view>
		<!-- <view class="qiun-padding qiun-bg-white ">
			<slider :value="itemCount" min="5" :max="sliderMax" block-color="#f8f8f8" block-size="18" @changing="sliderMove"
			 @change="sliderMove" />
		</view> -->
	</view>
	
</template>

<script>
	import uCharts from '@/components/u-charts/u-charts.js';
	
	var _self;
	var canvaCandle = null;
	var canvaColumn = null;
	import dataJson from '../data.js'
	export default {
		props:{
			width: {
				type: Number,
				default: 375
			},
			height: {
				type: Number,
				default: 200
			},
			
			height2: {
				type: Number,
				default: 100
			},
		},
		data() {
			return {
				cWidth: 375,
				cHeight: 200,
				cHeight2: 100,
				pixelRatio: 1,
				itemCount: 20, //x轴单屏数据密度
				sliderMax: 50,
				show: true,
			};
		},
		mounted() {

			this.dataList = dataJson.data
			_self = this;
			//#ifdef MP-ALIPAY
			uni.getSystemInfo({
				success: function(res) {
					if (res.pixelRatio > 1) {
						//正常这里给2就行，如果pixelRatio=3性能会降低一点
						//_self.pixelRatio =res.pixelRatio;
						_self.pixelRatio = 2;
					}
				}
			});
			//#endif
			this.getServerData();
		},
		methods: {
			
			getServerData() {
				let Candle = {
					categories: [],
					series: []
				};
				let Column = {
					categories: [],
					series: []
				};
				//这里我后台返回的是数组，所以用等于，如果您后台返回的是单条数据，需要push进去
				Candle.categories = this.dataList.Candle.categories;
				Candle.series = this.dataList.Candle.series;
				Column.categories = this.dataList.CandleColumn.categories;
				Column.series = this.dataList.CandleColumn.series;
				_self.showCandle("canvasCandle", Candle);
				_self.showColumn("canvasColumn", Column);
			},
			showCandle(canvasId, chartData) {
				canvaCandle = new uCharts({
					$this: _self,
					canvasId: canvasId,
					type: 'candle',
					fontSize: 11,
					padding: [10, 15, 0, 15],
					legend: {
						show: true,
						backgroundColor:'#12161F'
					},
					background: '#12161F',
					pixelRatio: _self.pixelRatio,
					categories: chartData.categories,
					series: chartData.series,
					animation: false,
					enableScroll: true,
					xAxis: {
						disableGrid: true,
						labelCount: 4,
						//type:'grid',
						//gridType:'dash',
						itemCount: _self.itemCount,
						scrollShow: true,
						scrollAlign: 'right',
					},
					yAxis: {
						gridType: 'dash',
						splitNumber: 5,
						
						format: (val) => {
							return val.toFixed(0)
						}
					},
					width: _self.width * _self.pixelRatio,
					height: _self.height * _self.pixelRatio,
					dataLabel: false,
					dataPointShape: true,
					extra: {
						candle: {
							color: {
								upLine: '#f04864',
								upFill: '#f04864',
								downLine: '#2fc25b',
								downFill: '#2fc25b'
							},
							average: {
								show: true,
								name: ['MA5', 'MA10', 'MA30'],
								day: [5, 10, 20],
								color: ['#1890ff', '#2fc25b', '#facc14']
							}
						},
						tooltip: {
							showBox:false,
							bgColor: '#000000',
							bgOpacity: 0.7,
							gridType: 'dash',
							dashLength: 5,
							gridColor: '#1890ff',
							fontColor: '#FFFFFF',
							horizentalLine: true,
							xAxisLabel: true,
							yAxisLabel: true,
							labelBgColor: '#DFE8FF',
							labelBgOpacity: 0.95,
							labelAlign: 'left',
							labelFontColor: '#666666'
						}
					},
				});

			},
			touchCandle(e) {
				canvaCandle.scrollStart(e);
			},
			moveCandle(e) {
				let distance = canvaCandle.scroll(e);
				if (distance !== undefined) {
					canvaColumn.translate(distance);
				}
			},
			touchEndCandle(e) {
				canvaCandle.scrollEnd(e);
				//下面是toolTip事件，如果滚动后不需要显示，可不填写
				canvaCandle.showToolTip(e, {
					format: function(item, category) {
						return category + ' ' + item.name + ':' + item.data
					}
				});
			},
			tapButton(type) {
				let step = 5;
				if (type == 'in') {
					_self.itemCount -= step;
					if (_self.itemCount <= 5) {
						_self.itemCount = 5;
					}
				} else {
					_self.itemCount += step;
					if (_self.itemCount >= _self.sliderMax) {
						_self.itemCount = _self.sliderMax;
					}
				}
				_self.zoomCandle(_self.itemCount);
			},
			sliderMove(e) {
				_self.itemCount = e.detail.value;
				_self.zoomCandle(e.detail.value);
			},
			zoomCandle(val) {
				canvaCandle.zoom({
					itemCount: val
				});
				canvaColumn.zoom({
					itemCount: val
				});
			},
			showColumn(canvasId, chartData) {
				canvaColumn = new uCharts({
					$this: _self,
					canvasId: canvasId,
					type: 'column',
					padding: [10, 15, 0, 25],
					legend: {
						show: false,
					},
					colors:['#f04864'],
					fontSize: 11,
					background: '#12161F',
					pixelRatio: _self.pixelRatio,
					animation: false,
					enableScroll: true,
					dataLabel: false,
					categories: chartData.categories,
					series: chartData.series,
					xAxis: {
						disabled: true,
						disableGrid: true,
						labelCount: 4,
						itemCount: _self.itemCount,
						scrollAlign: 'right',
					},
					yAxis: {
						
						splitNumber: 2,
						min: 0,
						
						format: (val) => {
							return val.toFixed(0)
						}
					},
					width: _self.width * _self.pixelRatio,
					height: _self.height2 * _self.pixelRatio,
					extra: {
						column: {
							type: 'group',
						}
					}
				});

			}

		},
	}
</script>
<style>
	uni-canvas{
		width: 100%;
		height:100%;
	}
	/* #canvasColumn{
		height: 50%;
	} */
</style>
